<template>
    <div>
        <el-main>
            <el-row >
                <el-col :span="6" :gutter="20" v-for="(image, index) in imageList.imageList2" :key="index" >
                    <el-card shadow="hover" style="margin-left:5px;margin-bottom:5px">
                        <el-radio-group v-model="radio1" style="width:195px">
                        <el-image
                      
                        :src=" image.url "
                        :class="radio1 == image.id ? 'selected' : '' "
                       
                        />
                        <el-text truncated class="imageName">{{ image.name }} </el-text>
                        
                            
                        <div style="display: flex; justify-content: space-around; margin-top: -20px">
                            
                            <el-radio :value=image.id  @change="xx(image.id)"></el-radio>
                            
                            <el-link type="primary" @click="updateImageName(image.name)">重命名</el-link>
                            <el-link type="warning" >删除</el-link>
                        </div>
                    </el-radio-group>
                    </el-card>
                </el-col>
                
            </el-row>
        </el-main>
    </div>
</template>

<script setup>
import { ref,watch,defineProps } from 'vue'
import { getImageList,getImageClassList,updateImageClass,deleteImageClass,createImageClass } from '@/api/image_class'
const radio1 = ref('1')
const xx = (id) => {
    console.log('radio1',radio1.value)
}

const props = defineProps({
    catgaryId: {
        type: Number,
        default: 1
    }
})
console.log('catgaryId',props)
// 获取图片列表
const imageList = ref({
    radio1: null,
    imageList2: []
})

const getImages = async (catgaryId,limit) => {
    const res = await getImageList(catgaryId,limit)
    .then(res => {
    imageList.value.imageList2 = res.list
})
    
}
getImages(1,10)
watch(() => props.catgaryId, (newCatgaryId, oldCatgaryId) => {
    getImages(newCatgaryId,10)
})

</script>
<style>
.el-main{
    padding-top:0px!important;
}
.imageName{
    text-align: center;display: block;position: relative; bottom: 25px; 
    color: #fff;
}
.selected {
  border: 2px solid red; 
}
</style>